---
title: API des intégrations d'Astro
sidebar:
  label: API des intégrations
i18nReady: true
---
import Since from '~/components/Since.astro'

**Les intégrations d'Astro** ajoutent de nouvelles fonctionnalités et de nouveaux comportements à votre projet avec seulement quelques lignes de code.

Cette page de référence est destinée aux personnes qui écrivent leur propre intégration. Pour apprendre à utiliser une intégration dans votre projet, consultez plutôt notre guide sur l'[utilisation des intégrations](/fr/guides/integrations-guide/).

## Exemples

Les intégrations officielles d'Astro peuvent vous servir de référence pour construire vos propres intégrations.

- **Moteurs de rendu :** [`svelte`](/fr/guides/integrations-guide/svelte/), [`react`](/fr/guides/integrations-guide/react/), [`preact`](/fr/guides/integrations-guide/preact/), [`vue`](/fr/guides/integrations-guide/vue/), [`solid`](/fr/guides/integrations-guide/solid-js/)
- **Bibliothèques :** [`partytown`](/fr/guides/integrations-guide/partytown/)
- **Fonctionnalités :** [`sitemap`](/fr/guides/integrations-guide/sitemap/)

## Référence rapide de l'API

```ts
interface AstroIntegration {
  name: string;
  hooks: {
    'astro:config:setup'?: (options: {
      config: AstroConfig;
      command: 'dev' | 'build' | 'preview' | 'sync';
      isRestart: boolean;
      updateConfig: (newConfig: DeepPartial<AstroConfig>) => AstroConfig;
      addRenderer: (renderer: AstroRenderer) => void;
      addWatchFile: (path: URL | string) => void;
      addClientDirective: (directive: ClientDirectiveConfig) => void;
      addMiddleware: (middleware: AstroIntegrationMiddleware) => void;
      addDevToolbarApp: (entrypoint: DevToolbarAppEntry) => void;
      injectScript: (stage: InjectedScriptStage, content: string) => void;
      injectRoute: (injectedRoute: InjectedRoute) => void;
      createCodegenDir: () => URL;
      logger: AstroIntegrationLogger;
    }) => void | Promise<void>;
    'astro:route:setup'?: (options: {
      route: RouteOptions;
      logger: AstroIntegrationLogger;
    }) => void | Promise<void>;
    'astro:routes:resolved'?: (options: {
      routes: IntegrationResolvedRoute[];
      logger: AstroIntegrationLogger;
    }) => void | Promise<void>;
    'astro:config:done'?: (options: {
      config: AstroConfig;
      setAdapter: (adapter: AstroAdapter) => void;
      injectTypes: (injectedType: InjectedType) => URL;
      logger: AstroIntegrationLogger;
      buildOutput: 'static' | 'server';
    }) => void | Promise<void>;
    'astro:server:setup'?: (options: {
      server: vite.ViteDevServer;
      logger: AstroIntegrationLogger;
      toolbar: ReturnType<typeof getToolbarServerCommunicationHelpers>;
      refreshContent?: (options: RefreshContentOptions) => Promise<void>;
    }) => void | Promise<void>;
    'astro:server:start'?: (options: {
      address: AddressInfo;
      logger: AstroIntegrationLogger;
    }) => void | Promise<void>;
    'astro:server:done'?: (options: {
      logger: AstroIntegrationLogger;
    }) => void | Promise<void>;
    'astro:build:start'?: (options: {
      logger: AstroIntegrationLogger;
    }) => void | Promise<void>;
    'astro:build:setup'?: (options: {
      vite: vite.InlineConfig;
      pages: Map<string, PageBuildData>;
      target: 'client' | 'server';
      updateConfig: (newConfig: vite.InlineConfig) => void;
      logger: AstroIntegrationLogger;
    }) => void | Promise<void>;
    'astro:build:ssr'?: (options: {
      manifest: SerializedSSRManifest;
      entryPoints: Map<IntegrationRouteData, URL>;
      middlewareEntryPoint: URL | undefined;
      logger: AstroIntegrationLogger;
    }) => void | Promise<void>;
    'astro:build:generated'?: (options: {
      dir: URL;
      logger: AstroIntegrationLogger;
    }) => void | Promise<void>;
    'astro:build:done'?: (options: {
      pages: { pathname: string }[];
      dir: URL;
      assets: Map<string, URL[]>;
      logger: AstroIntegrationLogger;
    }) => void | Promise<void>;

    // ... tous les hooks personnalisés provenant des intégrations
  };
}
```

## Hooks

Astro fournit des hooks que les intégrations peuvent implémenter pour s'exécuter pendant certaines parties du cycle de vie d'Astro. Les hooks Astro sont définis dans l'interface `IntegrationHooks`, qui fait partie de l'espace de noms global `Astro`. Chaque hook dispose d'une [option `logger`](#astrointegrationlogger) qui vous permet d'utiliser le logger d'Astro pour écrire des journaux.

Les hooks suivants sont intégrés à Astro :

### `astro:config:setup`

**Prochain hook :** [`astro:route:setup`](#astroroutesetup)

**Quand :** Lors de l'initialisation, avant que les configurations de [Vite](https://vite.dev/config/) ou d'[Astro](/fr/reference/configuration-reference/) ne soient résolues.

**Pourquoi :** Pour étendre la configuration du projet. Cela comprend la mise à jour de la [configuration Astro](/fr/reference/configuration-reference/), l'application des [modules d'extension de Vite](https://vite.dev/guide/api-plugin.html), l'ajout de moteurs de rendu de composants et l'injection de scripts dans la page.

```ts
'astro:config:setup'?: (options: {
  config: AstroConfig;
  command: 'dev' | 'build' | 'preview' | 'sync';
  isRestart: boolean;
  updateConfig: (newConfig: DeepPartial<AstroConfig>) => AstroConfig;
  addRenderer: (renderer: AstroRenderer) => void;
  addClientDirective: (directive: ClientDirectiveConfig) => void;
  addMiddleware: (middleware: AstroIntegrationMiddleware) => void;
  addDevToolbarApp: (entrypoint: DevToolbarAppEntry) => void;
  addWatchFile: (path: URL | string) => void;
  injectScript: (stage: InjectedScriptStage, content: string) => void;
  injectRoute: (injectedRoute: InjectedRoute) => void;
  createCodegenDir: () => URL;
  logger: AstroIntegrationLogger;
}) => void | Promise<void>;
```

#### Option `config`

<p>

**Type :** `AstroConfig`
</p>

Une copie en lecture seule de la [configuration Astro](/fr/reference/configuration-reference/) fournie par l'utilisateur. Celle-ci est résolue _avant_ que toutes les autres intégrations aient été exécutées. Si vous avez besoin d'une copie de la configuration après que toutes les intégrations ont terminé leurs mises à jour, [consultez le hook `astro:config:done`](#astroconfigdone).

#### Option `command`

<p>

**Type :** `'dev' | 'build' | 'preview' | 'sync'`
</p>

- `dev` - Le projet est exécuté avec `astro dev`
- `build` - Le projet est exécuté avec `astro build`
- `preview` - Le projet est exécuté avec `astro preview`
- `sync` - Le projet est exécuté avec `astro sync`

#### Option `isRestart`

<p>

**Type :** `boolean`<br />
<Since v="1.5.0" />
</p>

`false` lorsque le serveur de développement démarre, `true` lorsqu'un rechargement est déclenché. Utile pour détecter si cette fonction est appelée plus d'une fois.

#### Option `updateConfig()`

<p>

**Type :** `(newConfig: DeepPartial<AstroConfig>) => AstroConfig;`
</p>

Une fonction de rappel pour mettre à jour la [config d'Astro](/fr/reference/configuration-reference/) fournie par l'utilisateur. Toute configuration que vous fournissez **sera fusionnée avec la configuration de l'utilisateur + les mises à jour effectuées par d'autres intégrations**, vous êtes donc libre d'ignorer les clés !

Par exemple, disons que vous devez fournir un module d'extension pour [Vite](https://vite.dev/) au projet de l'utilisateur :

```js
import bananaCSS from '@vitejs/official-banana-css-plugin';

export default {
  name: 'banana-css-integration',
  hooks: {
    'astro:config:setup': ({ updateConfig }) => {
      updateConfig({
        vite: {
          plugins: [bananaCSS()],
        }
      })
    }
  }
}
```

#### Option `addRenderer()`

<p>

**Type :** `(renderer:` [`AstroRenderer`](https://github.com/withastro/astro/blob/fdd607c5755034edf262e7b275732519328a33b2/packages/astro/src/%40types/astro.ts#L872-L883) `) => void;`<br />
**Exemples :** [`svelte`](https://github.com/withastro/astro/blob/main/packages/integrations/svelte/src/index.ts), [`react`](https://github.com/withastro/astro/blob/main/packages/integrations/react/src/index.ts), [`preact`](https://github.com/withastro/astro/blob/main/packages/integrations/preact/src/index.ts), [`vue`](https://github.com/withastro/astro/blob/main/packages/integrations/vue/src/index.ts), [`solid`](https://github.com/withastro/astro/blob/main/packages/integrations/solid/src/index.ts)
</p>

Une fonction de rappel pour ajouter un moteur de rendu de framework de composants (c'est-à-dire React, Vue, Svelte, etc.). Vous pouvez consulter les exemples et la définition des types ci-dessus pour des options plus avancées, mais voici les deux principales options à connaître :

- `clientEntrypoint` - chemin d'accès à un fichier qui s'exécute sur le client chaque fois que votre composant est utilisé. Ce fichier sert principalement à afficher ou à hydrater votre composant avec JS.
- `serverEntrypoint` - chemin d'accès à un fichier qui s'exécute lors des requêtes côté serveur ou des compilations statiques, chaque fois que votre composant est utilisé. Ces fichiers devraient restituer les composants en un balisage statique, avec des hooks d'hydratation, le cas échéant. [Le callback `renderToString` de React](https://react.dev/reference/react-dom/server/renderToString) est un exemple classique.

<p><Since v="5.0.0" /></p>

Les fonctions `clientEntrypoint` et `serverEntrypoint` acceptent une `URL`.

#### Option `addWatchFile()`

<p>

**Type :** `(path: URL | string) => void`<br />
<Since v="1.5.0" />
</p>

Si votre intégration dépend d'un fichier de configuration que Vite ne surveille pas et/ou qui nécessite un redémarrage complet du serveur de développement pour prendre effet, ajoutez-le avec `addWatchFile`. Chaque fois que ce fichier changera, le serveur de développement d'Astro sera rechargé (vous pouvez vérifier quand un rechargement a lieu avec `isRestart`).

Exemple d'utilisation :

```js
// Il doit s'agir d'un chemin d'accès absolu !
addWatchFile('/home/utilisateur/.../ma-config.json');
addWatchFile(new URL('./ec.config.mjs', config.root));
```

#### Option `addClientDirective()`

<p>

**Type :** `(directive:` [`ClientDirectiveConfig`](https://github.com/withastro/astro/blob/00327c213f74627ac9ca1dec774efa5bf71e9375/packages/astro/src/%40types/astro.ts#L1872-L1875) `) => void;`<br />
<Since v="2.6.0" />
</p>

Ajoute une [directive client personnalisée](/fr/reference/directives-reference/#directives-client-personnalisées) à utiliser dans les fichiers `.astro`.

Notez que les points d'entrée des directives ne sont regroupés qu'à travers esbuild et qu'ils doivent rester petits afin de ne pas ralentir l'hydratation des composants.

Exemple d'utilisation :

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import clickDirective from './astro-click-directive/register.js'

// https://astro.build/config
export default defineConfig({
  integrations: [
    clickDirective()
  ],
});
```

```js title="astro-click-directive/register.js"
/**
 * @type {() => import('astro').AstroIntegration}
 */
export default () => ({
  name: "client:click",
  hooks: {
    "astro:config:setup": ({ addClientDirective }) => {
      addClientDirective({
        name: "click",
        entrypoint: "./astro-click-directive/click.js",
      });
    },
  },
});
```

```js title="astro-click-directive/click.js"
/**
 * Hydrate au premier clic sur la fenêtre
 * @type {import('astro').ClientDirective}
 */
export default (load, opts, el) => {
  window.addEventListener('click', async () => {
    const hydrate = await load()
    await hydrate()
  }, { once: true })
}
```

Vous pouvez également ajouter des types pour les directives dans le fichier de définition des types de votre bibliothèque :

```ts title="astro-click-directive/index.d.ts"
import 'astro'
declare module 'astro' {
  interface AstroClientDirectives {
    'client:click'?: boolean
  }
}
```

#### Option `addDevToolbarApp()`

<p>

**Type :** `(entrypoint: DevToolbarAppEntry) => void;`<br />
<Since v="3.4.0" />
</p>

Ajoute une [application de barre d'outils de développement personnalisée](/fr/reference/dev-toolbar-app-reference/).

Exemple d'utilisation :

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';
import devToolbarIntegration from './astro-dev-toolbar-app/integration.js'

// https://astro.build/config
export default defineConfig({
  integrations: [
    devToolbarIntegration()
  ],
});
```

```js title="astro-dev-toolbar-app/integration.js"
/**
 * @type {() => import('astro').AstroIntegration}
 */
export default () => ({
  name: "dev-toolbar-app",
  hooks: {
    "astro:config:setup": ({ addDevToolbarApp }) => {
      addDevToolbarApp({
        entrypoint: "./astro-dev-toolbar-app/plugin.js",
        id: "mon-module-extension",
        name: "Mon module d'extension"
      });
    },
  },
});
```

```js title="astro-dev-toolbar-app/plugin.js"

/**
 * @type {import('astro').DevToolbarApp}
 */
export default {
  id: "mon-module-extension",
  name: "Mon module d'extension",
  icon: "<svg>...</svg>",
  init() {
    console.log("Je suis une application de barre d'outils de développement !")
  },
};
```
#### Option `addMiddleware()`

<p>

**Type :** `(middleware:` [`AstroIntegrationMiddleware`](https://github.com/withastro/astro/blob/852ac0f75dfca1b2602e9cdbfa0447d9998e2449/packages/astro/src/%40types/astro.ts#L2124-L2127) `) => void;`<br />
<Since v="3.5.0" />
</p>

Ajoute un [middleware](/fr/guides/middleware/) à exécuter sur chaque requête. Prend le module `entrypoint` qui contient le middleware, et un ordre (`order`) pour spécifier s'il doit s'exécuter avant (`pre`) d'autres middlewares ou après (`post`).

```js title="@my-package/integration.js"
/**
 * @type {() => import('astro').AstroIntegration}
 */
export default () => ({
  name: "mon-paquet-middleware",
  hooks: {
    "astro:config:setup": ({ addMiddleware }) => {
        addMiddleware({
          entrypoint: '@mon-paquet/middleware',
          order: 'pre'
        });
    },
  },
});
```

Le middleware est défini dans un paquet avec une fonction `onRequest`, comme pour le middleware défini par l'utilisateur.

```js title="@my-package/middleware.js"
import { defineMiddleware } from 'astro:middleware';

export const onRequest = defineMiddleware(async (context, next) => {
  if(context.url.pathname === '/chemin-de-test') {
    return Response.json({
      ok: true
    });
  }

  return next();
});
```

<p><Since v="5.0.0" /></p>

La fonction accepte également une `URL` pour `entrypoint` :

```js title="@mon-paquet/integration.js" ins={9}
/**
 * @type {() => import('astro').AstroIntegration}
 */
export default () => ({
  name: "mon-paquet-middleware",
  hooks: {
    "astro:config:setup": ({ addMiddleware }) => {
        addMiddleware({
          entrypoint: new URL('./middleware.js', import.meta.url),
          order: 'pre'
        });
    },
  },
});
```

#### Option `injectRoute()`

<p>

**Type :** `({ pattern: string; entrypoint: string | URL; prerender?: boolean }) => void;`
</p>

Une fonction de rappel pour injecter des routes dans un projet Astro. Les routes injectées peuvent être des [pages `.astro`](/fr/basics/astro-pages/) ou des [gestionnaires de routes `.js` et `.ts`](/fr/guides/endpoints/#points-de-terminaison-des-fichiers-statiques).

`injectRoute` prend un objet avec un modèle (`pattern`) et un point d'entrée (`entrypoint`).

- `pattern` - où la route doit être affichée dans le navigateur, par exemple `/foo/bar`. Un modèle (`pattern`) peut utiliser la syntaxe de chemin de fichier d'Astro pour indiquer des routes dynamiques, par exemple `/foo/[bar]` ou `/foo/[...bar]`. Notez qu'une extension de fichier n'est **pas** nécessaire dans `pattern`.
- `entrypoint` - un spécificateur de module nu pointant vers la page `.astro` ou le gestionnaire de route `.js`/`.ts` qui gère la route indiquée dans `pattern`.
- `prerender` - un booléen à définir si Astro ne peut pas détecter votre exportation de `prerender`.

##### Exemple d'utilisation

```js
injectRoute({
  // Utilise la syntaxe Astro pour les routes dynamiques.
  pattern: '/sous-dossier/[dynamic]',
  // Utilise la syntaxe du chemin relatif pour une route locale.
  entrypoint: './src/page-dynamique.astro'
  // À utiliser uniquement si Astro ne peut pas détecter votre exportation de `prerender`
  prerender: false
});
```

Pour une intégration conçue pour être installée dans d'autres projets, utilisez son nom de paquet pour faire référence au point d'entrée de la route.
L'exemple suivant montre un paquet publié sur npm sous le nom `@fancy/dashboard` injectant une route de tableau de bord :

```js
injectRoute({
  pattern: '/fancy-dashboard',
  entrypoint: '@fancy/dashboard/dashboard.astro'
});
```

Lorsque vous publiez votre paquet (`@fancy/dashboard`, dans ce cas) sur npm, vous devez exporter `dashboard.astro` dans votre `package.json` :

```json title="package.json" "exports"
{
  "name": "@fancy/dashboard",
  // ...
  "exports": { "./dashboard.astro": "./dashboard.astro" }
}
```

<p><Since v="5.0.0" /></p>

La fonction accepte également une `URL` pour `entrypoint` :

```js "new URL('./dashboard.astro', import.meta.url)"
injectRoute({
  pattern: '/fancy-dashboard',
  entrypoint: new URL('./dashboard.astro', import.meta.url)
});
```

#### Option `injectScript()`

<p>

**Type :** `(stage: InjectedScriptStage, content: string) => void;`
</p>

Une fonction de rappel pour injecter une chaîne de contenu JavaScript sur chaque page.

La **phase (`stage`)** indique comment ce script (le `contenu`) doit être inséré. Certaines phases permettent d'insérer des scripts sans modification, tandis que d'autres permettent une optimisation pendant [l'étape de regroupement de Vite](https://vite.dev/guide/build.html) :

- `"head-inline"` : Injecté dans une balise script dans le `<head>` de chaque page. **Non** optimisé ou interprété par Vite.
- `"before-hydration"` : Importé côté client, avant l'exécution du script d'hydratation. Optimisé et interprété par Vite.
- `"page"` : Similaire à `head-inline`, sauf que l'extrait injecté est traité par Vite et regroupé avec toutes les autres balises `<script>` définies à l'intérieur des composants Astro sur la page. Le script sera chargé avec un `<script type="module">` dans la sortie finale de la page, optimisé et interprété par Vite.
- `"page-ssr"` : Importé en tant que module séparé dans le frontmatter de chaque composant de page Astro. Parce que cette phase importe votre script, l'objet global `Astro` n'est pas disponible et votre script ne sera exécuté qu'une seule fois lorsque l'instruction `import` est évaluée pour la première fois.

    La principale utilisation de la phase `page-ssr` est l'injection d'un `import` CSS dans chaque page à optimiser et à résoudre par Vite :
    ```js
    injectScript('page-ssr', 'import "global-styles.css";');
    ```

#### `createCodegenDir`

<p>

**Type :** `() => URL;`<br />
<Since v="5.0.0" />
</p>

Une fonction qui crée le dossier `<root>/.astro/integrations/<normalized_integration_name>` et renvoie son chemin.

Cela vous permet d'avoir un dossier dédié, évitant ainsi les conflits avec une autre intégration ou Astro lui-même. Ce répertoire est créé en appelant cette fonction, il est donc sûr d'y écrire directement des fichiers :

```ts title="mon-integration.ts"
import { writeFileSync } from 'node:fs'

const integration = {
    name: 'mon-integration',
    hooks: {
        'astro:config:setup': ({ createCodegenDir }) => {
            const codegenDir = createCodegenDir()
            writeFileSync(new URL('cache.json', codegenDir), '{}', 'utf-8')
        }
    }
}
```

### `astro:route:setup`

<p><Since v="4.14.0" /></p>

**Hook précédent :** [`astro:config:setup`](#astroconfigsetup)

**Hook suivant :** [`astro:routes:resolved`](#astroroutesresolved)

**Quand :** Avec `astro build`, avant le début du regroupement. Avec `astro dev`, lors de la construction du graphe des modules et à chaque modification d'une route basée sur un fichier (ajoutée/supprimée/mise à jour).

**Pourquoi :** Pour définir les options d'une route au moment de la compilation ou de la demande, comme l'activation du [rendu du serveur à la demande](/fr/guides/on-demand-rendering/#activation-du-rendu-à-la-demande).

```js
'astro:route:setup'?: (options: {
  route: RouteOptions;
  logger: AstroIntegrationLogger;
}) => void | Promise<void>;
```

#### Option `route`

<p>

**Type :** [`RouteOptions`](https://github.com/withastro/astro/blob/3b10b97a4fecd1dfd959b160a07b5b8427fe40a7/packages/astro/src/types/public/integrations.ts#L14-L27)
</p>

Un objet avec une propriété `component` pour identifier la route et les valeurs supplémentaires suivantes pour vous permettre de configurer la route générée : `prerender`.

##### `route.component`

<p>
**Type :** `string`<br />
<Since v="4.14.0" />
</p>

La propriété `component` indique le point d'entrée qui sera rendu sur la route. Vous pouvez accéder à cette valeur avant la création des routes afin de configurer le rendu du serveur à la demande pour cette page.

##### `route.prerender`

<p>
**Type :** `boolean`<br />
**Par défaut :** `undefined`<br />
<Since v="4.14.0" />
</p>

La propriété `prerender` est utilisée pour configurer [le rendu du serveur à la demande](/fr/guides/on-demand-rendering/#activation-du-rendu-à-la-demande) pour une route. Si le fichier de route contient une valeur explicite `export const prerender`, la valeur sera utilisée comme valeur par défaut au lieu de `undefined`.

```js title="astro.config.mjs"
import { defineConfig } from 'astro/config';

export default defineConfig({
  integrations: [setPrerender()],
});

function setPrerender() {
  return {
    name: 'set-prerender',
    hooks: {
      'astro:route:setup': ({ route }) => {
        if (route.component.endsWith('/blog/[slug].astro')) {
          route.prerender = true;
        }
      },
    },
  };
}
```
 
Si la valeur finale après l'exécution de tous les hooks est `undefined`, la route reviendra à une valeur par défaut de pré-rendu basée sur l'[option `output`](/fr/reference/configuration-reference/#output) : pré-rendu pour le mode `static` et rendu à la demande pour le mode `server`.

### `astro:routes:resolved`

<p>

<Since v="5.0.0" />
</p>

**Hook précédent :** [`astro:config:setup`](#astroconfigsetup)

**Hook suivant :** [`astro:config:done`](#astroconfigdone)

**Quand :** Dans `astro dev`, il s'exécute également si une route basée sur un fichier change (ajoutée/supprimée/mise à jour).

**Pourquoi :** Pour accéder aux routes et à leurs métadonnées

```js
'astro:routes:resolved'?: (options: {
  routes: IntegrationResolvedRoute[];
  logger: AstroIntegrationLogger;
}) => void | Promise<void>;
```

#### Option `routes`

<p>

**Type :** [`IntegrationResolvedRoute[]`](#référence-du-type-integrationresolvedroute)
</p>

Une liste de toutes les routes avec leurs métadonnées associées.

Exemple d'utilisation :

```js title="mon-integration.mjs"
const integration = () => {
    return {
        name: 'mon-integration',
        hooks: {
            'astro:routes:resolved': ({ routes }) => {
                const projectRoutes = routes.filter(r => r.origin === 'projet').map(r => r.pattern)
                
                console.log(projectRoutes)
            },
        }
    }
}
```

### `astro:config:done`

**Hook précédent :** [`astro:config:setup`](#astroroutesresolved)

**Hook suivant :** [`astro:server:setup`](#astroserversetup) en mode « dev », ou [`astro:build:start`](#astrobuildstart) en mode « production ».

**Quand :** Après que la configuration Astro a été résolue et que les autres intégrations aient exécuté leurs hooks `astro:config:setup`.

**Pourquoi :** Pour récupérer la configuration finale afin de l'utiliser dans d'autres hooks.

```js
'astro:config:done'?: (options: {
  config: AstroConfig;
  setAdapter: (adapter: AstroAdapter) => void;
  injectTypes: (injectedType: InjectedType) => URL;
  logger: AstroIntegrationLogger;
  buildOutput: 'static' | 'server';
}) => void | Promise<void>;
```

#### Option `config`

<p>

**Type :** `AstroConfig`
</p>

Une copie en lecture seule de la [configuration Astro](/fr/reference/configuration-reference/) fournie par l'utilisateur. Celle-ci est résolue _après_ l'exécution des autres intégrations.

#### Option `setAdapter()`

<p>

**Type :** `(adapter: AstroAdapter) => void;`
</p>

Transforme l'intégration en adaptateur. Pour en savoir plus, consultez l'[API des adaptateurs](/fr/reference/adapter-reference/).

#### Options `injectTypes()`

<p>

**Type :** `(injectedType: { filename: string; content: string }) => URL`<br />
<Since v="4.14.0" />
</p>

Permet d'injecter des types dans le projet de votre utilisateur en ajoutant un nouveau fichier `*.d.ts`.

La propriété `filename` sera utilisée pour générer un fichier dans `/.astro/integrations/<normalized_integration_name>/<normalized_filename>.d.ts` et doit se terminer par `".d.ts"`.

La propriété `content` créera le corps du fichier et doit utiliser une syntaxe TypeScript valide.

De plus, `injectTypes()` renvoie une URL vers le chemin normalisé afin que vous puissiez écraser son contenu ultérieurement ou le manipuler comme vous le souhaitez.

```js
const path = injectTypes({
  filename: "types.d.ts",
  content: "declare module 'virtual:integration' {}"
})
console.log(path) // URL
```

#### Option `buildOutput`

<p>

**Type :** `'static' | 'server'`<br />
<Since v="5.0.0" />
</p>

Permet d'adapter la logique de votre intégration en fonction du rendu du projet de l'utilisateur.

### `astro:server:setup`

**Hook précédent :** [`astro:config:done`](#astroconfigdone)

**Hook suivant :** [`astro:server:start`](#astroserverstart)

**Quand :** Juste après la création du serveur Vite en mode « dev », mais avant que l'événement `listen()` ne soit déclenché. [Voir l'API createServer de Vite](https://vite.dev/guide/api-javascript.html#createserver) pour plus d'informations.

**Pourquoi :** Pour mettre à jour les options du serveur Vite et le middleware, ou activer la prise en charge de l'actualisation de la couche de contenu.

```js
'astro:server:setup'?: (options: {
  server: vite.ViteDevServer;
  logger: AstroIntegrationLogger;
  toolbar: ReturnType<typeof getToolbarServerCommunicationHelpers>;
  refreshContent: (options: {
    loaders?: Array<string>;
    context?: Record<string, any>;
  }) => Promise<void>;
}) => void | Promise<void>;
```

#### Option `server`

<p>

**Type :** [`ViteDevServer`](https://vite.dev/guide/api-javascript.html#vitedevserver)
</p>

Une instance mutable du serveur Vite utilisée en mode « dev ». Par exemple, c'est [utilisé par notre intégration Partytown](/fr/guides/integrations-guide/partytown/) pour injecter le serveur Partytown en tant que middleware :

```js
export default {
  name: 'partytown',
  hooks: {
    'astro:server:setup': ({ server }) => {
      server.middlewares.use(
        function middleware(req, res, next) {
          // traite les demandes
        }
      );
    }
  }
}
```

#### Option `toolbar`

<p>

**Type :** `ReturnType<typeof getToolbarServerCommunicationHelpers>`<br />
<Since v="4.7.0" />
</p>

Un objet fournissant des fonctions de rappel pour interagir avec la [barre d'outils de développement](/fr/reference/dev-toolbar-app-reference/):

##### `on()`

<p>

**Type :** `<T>(event: string, callback: (data: T) => void) => void`<br />
</p>

Une fonction qui prend un nom d'événement comme premier argument et une fonction de rappel comme second argument. Cela vous permet de recevoir un message d'une application de barre d'outils de développement avec des données associées à cet événement.

##### `onAppInitialized()`

<p>

**Type :** `(appId: string, callback: (data: Record<string, never>) => void) => void`<br />
</p>

Une fonction déclenchée lorsqu'une application de barre d'outils de développement est initialisée. Le premier argument est l'ID de l'application qui a été initialisée. Le deuxième argument est une fonction de rappel à exécuter lorsque l'application est initialisée.

##### `onAppToggled()`

<p>

**Type :** `(appId: string, callback: (data: { state: boolean; }) => void) => void`<br />
</p>

Une fonction déclenchée lorsqu'une application de barre d'outils de développement est activée ou désactivée. Le premier argument est l'ID de l'application qui a été activée ou désactivée. Le deuxième argument est une fonction de rappel fournissant l'état à exécuter lorsque l'application est activée ou désactivée.

##### `send()`

<p>

**Type :** `<T>(event: string, payload: T) => void`<br />
</p>

Une fonction qui envoie un message à la barre d'outils de développement qu'une application peut écouter. Cela prend un nom d'événement comme premier argument et une charge utile comme deuxième argument qui peut être n'importe quelle donnée sérialisable.

#### Option `refreshContent()`

<p>

**Type :** `(options: { loaders?: Array<string>; context?: Record<string, any>; }) => Promise<void>`<br />
<Since v="5.0.0" />
</p>

Une fonction permettant aux intégrations de déclencher une mise à jour de la couche de contenu pendant `astro dev`. Cela peut être utilisé, par exemple, pour enregistrer un point de terminaison webhook pendant le développement, ou pour ouvrir un socket vers un CMS pour écouter les modifications.

Par défaut, `refreshContent` actualise toutes les collections. Vous pouvez éventuellement transmettre une propriété `loaders`, qui est un tableau de noms de chargeurs. Si elle est fournie, seules les collections qui utilisent ces chargeurs seront actualisées. Par exemple, une intégration CMS pourrait utiliser cette propriété pour actualiser uniquement ses propres collections.

Vous pouvez également transmettre un objet `context` aux chargeurs. Il peut être utilisé pour transmettre des données arbitraires telles que le corps du webhook ou un événement du websocket.

```ts title=mon-integration.ts {19-22}
 {
    name: 'mon-integration',
    hooks: {
        'astro:server:setup': async ({ server, refreshContent }) => {
            // Enregistrer un point de terminaison webhook de serveur de développement
            server.middlewares.use('/_refresh', async (req, res) => {
                if(req.method !== 'POST') {
                  res.statusCode = 405
                  res.end('Méthode non autorisée');
                  return
                }
                let body = '';
                req.on('data', chunk => {
                    body += chunk.toString();
                });
                req.on('end', async () => {
                    try {
                        const webhookBody = JSON.parse(body);
                        await refreshContent({
                          context: { webhookBody },
                          loaders: ['mon-chargeur']
                        });
                        res.writeHead(200, { 'Content-Type': 'application/json' });
                        res.end(JSON.stringify({ message: 'Contenu actualisé avec succès' }));
                    } catch (error) {
                        res.writeHead(500, { 'Content-Type': 'application/json' });
                        res.end(JSON.stringify({ error: "Échec de l'actualisation du contenu : " + error.message }));
                    }
                });
            });
        }
    }
}
```

Le chargeur peut ensuite accéder à la propriété `refreshContextData` pour obtenir le corps du webhook. Consultez la propriété [`refreshContextData`](/fr/reference/content-loader-reference/#refreshcontextdata) pour plus d'informations.

### `astro:server:start`

**Hook précédent :**  [`astro:server:setup`](#astroserversetup)

**Hook suivant :**  [`astro:server:done`](#astroserverdone)

**Quand :** Juste après que l'événement `listen()` du serveur se soit déclenché.

**Pourquoi :** Intercepter les requêtes réseau à l'adresse spécifiée. Si vous avez l'intention d'utiliser cette adresse pour un middleware, pensez à utiliser `astro:server:setup` à la place.

```js
'astro:server:start'?: (options: {
  address: AddressInfo;
  logger: AstroIntegrationLogger;
}) => void | Promise<void>;
```

#### Option `address`

<p>

**Type :** [`AddressInfo`](https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules__types_node_net_d_._net_.addressinfo.html)
</p>

L'adresse, la famille et le numéro de port fournis par le [module Net de Node.js](https://nodejs.org/api/net.html).

### `astro:server:done`

**Hook précédent :** [`astro:server:start`](#astroserverstart)

**Quand :** Juste après la fermeture du serveur de développement.

**Pourquoi :** Pour exécuter les événements de nettoyage que vous pouvez déclencher pendant les hooks `astro:server:setup` ou `astro:server:start`.

```js
'astro:server:done'?: (options: {
  logger: AstroIntegrationLogger;
}) => void | Promise<void>;
```

### `astro:build:start`

**Hook précédent :** [`astro:config:done`](#astroconfigdone)

**Hook suivant :** [`astro:build:setup`](#astrobuildsetup)

**Quand :** Après l'événement `astro:config:done`, mais avant le début de la compilation pour la production.

**Pourquoi :** Pour configurer les objets globaux ou les clients nécessaires lors d'une compilation pour la production. Cela peut également étendre les options de configuration de la compilation dans l'[API des adaptateurs](/fr/reference/adapter-reference/).

```js
'astro:build:start'?: (options: {
  logger: AstroIntegrationLogger;
}) => void | Promise<void>;
```

### `astro:build:setup`

**Hook précédent :** [`astro:build:start`](#astrobuildstart)

**Hook suivant :** [`astro:build:ssr`](#astrobuildssr)

**Quand :** Après le hook `astro:build:start`, s'exécute immédiatement avant la compilation.

**Pourquoi :** A ce stade, la configuration de Vite pour la compilation a été complètement assemblée, c'est votre dernière chance de la modifier. Cela peut être utile, par exemple, pour écraser certains paramètres par défaut. Si vous n'êtes pas sûr de devoir utiliser ce hook ou `astro:build:start`, utilisez plutôt `astro:build:start`.

```js
'astro:build:setup'?: (options: {
  vite: vite.InlineConfig;
  pages: Map<string, PageBuildData>;
  target: 'client' | 'server';
  updateConfig: (newConfig: vite.InlineConfig) => void;
  logger: AstroIntegrationLogger;
}) => void | Promise<void>;

```

#### Option `vite`

<p>

**Type :** [`InlineConfig`](https://vite.dev/guide/api-javascript.html#inlineconfig)
</p>

Un objet qui vous permet d'accéder à la configuration de Vite utilisée pour la compilation.

Cela peut être utile si vous avez besoin d'accéder aux options de configuration dans votre intégration :

```js
export default {
  name: 'mon-integration',
  hooks: {
    'astro:build:setup': ({ vite }) => {
      const { publicDir, root } = vite;
    },
  }
}
```

#### Option `pages`

<p>

**Type :** <code>Map\<string, <a href="https://github.com/withastro/astro/blob/3b10b97a4fecd1dfd959b160a07b5b8427fe40a7/packages/astro/src/core/build/types.ts#L17-L23">PageBuildData</a>\></code>
</p>

Une `Map` avec une liste de pages comme clé et leurs données de construction comme valeur.

Cela peut être utilisé pour effectuer une action si une route correspond à un critère :

```js
export default {
  name: 'mon-integration',
  hooks: {
    'astro:build:setup': ({ pages }) => {
      pages.forEach((data) => {
        if (data.route.pattern.test("/blog")) {
          console.log(data.route.type);
        }
      });
    },
  }
}
```

#### Option `target`

<p>

**Type :** `'client' | 'server'`
</p>

La compilation est divisée en deux phases distinctes : `client` et `server`. Cette option vous permet de déterminer la phase de compilation en cours.

Cela peut être utilisé pour effectuer une action uniquement dans une phase spécifique :

```js
export default {
  name: 'mon-integration',
  hooks: {
    'astro:build:setup': ({ target }) => {
      if (target === "server") {
        // faire quelque chose dans la phase de compilation du serveur
      }
    },
  }
}
```

#### Option `updateConfig()`

<p>

**Type :** <code>(newConfig: <a href="https://vite.dev/guide/api-javascript.html#inlineconfig">InlineConfig</a>) => void</code>
</p>

Une fonction de rappel pour mettre à jour les options de [Vite](https://vite.dev/) utilisées dans la compilation. Toute configuration que vous fournissez **sera fusionnée avec la configuration utilisateur + d’autres mises à jour de configuration d’intégration**, vous êtes donc libre d’omettre des clés !

Par exemple, cela peut être utilisé pour fournir un module d'extension au projet de l'utilisateur :

```js
import awesomeCssPlugin from 'module-extension-css-genial-vite';

export default {
  name: 'mon-integration',
  hooks: {
    'astro:build:setup': ({ updateConfig }) => {
      updateConfig({
        plugins: [awesomeCssPlugin()],
      })
    }
  }
}
```

### `astro:build:ssr`

**Hook précédent :** [`astro:build:setup`](#astrobuildsetup)

**Hook suivant :** [`astro:build:generated`](#astrobuildgenerated)

**Quand :** Une fois la compilation SSR pour la production terminée.

**Pourquoi :** Pour accéder au manifeste SSR et à la carte des points d'entrée émis. Ceci est utile lors de la création de compilations SSR personnalisées dans des modules d'extension ou des intégrations.
- `entryPoints` fait correspondre une route de page au fichier physique émis après la compilation,
- `middlewareEntryPoint` est le chemin d'accès au système de fichiers du middleware.

```js
'astro:build:ssr'?: (options: {
  manifest: SerializedSSRManifest;
  entryPoints: Map<IntegrationRouteData, URL>;
  middlewareEntryPoint: URL | undefined;
  logger: AstroIntegrationLogger;
}) => void | Promise<void>;
```

#### Option `manifest`

<p>

**Type :** [`SerializedSSRManifest`](https://github.com/withastro/astro/blob/3b10b97a4fecd1dfd959b160a07b5b8427fe40a7/packages/astro/src/core/app/types.ts#L91-L109)
</p>

Vous permet de créer une compilation personnalisée en accédant au manifeste SSR.

```js
export default {
  name: 'mon-integration',
  hooks: {
    'astro:build:ssr': ({ manifest }) => {
      const { i18n } = manifest;
      if (i18n?.strategy === "domains-prefix-always") {
        // faire quelque chose
      }
    },
  },
}
```

#### Option `entryPoints`

<p>

**Type :** <code>Map\<<a href="#référence-du-type-integrationroutedata">IntegrationRouteData</a>, URL\></code><br />
<Since v="2.7.0" />
</p>

Une `Map` des points d'entrée émis avec `IntegrationRouteData` comme clé et l'URL du fichier physique comme valeur.

```js
export default {
  name: 'mon-integration',
  hooks: {
    'astro:build:ssr': ({ entryPoints }) => {
      entryPoints.forEach((url) => {
        console.log(url.href);
      });
    },
  },
}
```

#### Option `middlewareEntryPoint`

<p>

**Type :** `URL | undefined`<br />
<Since v="2.8.0" />
</p>

Expose le chemin du fichier [middleware](/fr/guides/middleware/).

```js
export default {
  name: 'mon-integration',
  hooks: {
    'astro:build:ssr': ({ middlewareEntryPoint }) => {
      if (middlewareEntryPoint) {
        // effectuer certaines opérations si un middleware existe
      }
    },
  },
}
```

### `astro:build:generated`

<p>

<Since v="1.3.0" />
</p>

**Hook précédent :** [`astro:build:setup`](#astrobuildsetup)

**Hook suivant :** [`astro:build:done`](#astrobuilddone)

**Quand :** Une fois qu'une version statique de production a fini de générer les routes et les ressources.

**Pourquoi :** Accéder aux routes et aux ressources générées **avant** que les artefacts de compilation ne soient nettoyés. C'est un cas d'utilisation très rare. Nous recommandons d'utiliser [`astro:build:done`](#astrobuilddone) à moins que vous n'ayez vraiment besoin d'accéder aux fichiers générés avant le nettoyage.

```js
'astro:build:generated'?: (options: {
  dir: URL;
  logger: AstroIntegrationLogger;
}) => void | Promise<void>;
```

#### Option `dir`

<p>

**Type :** [`URL`](https://developer.mozilla.org/fr/docs/Web/API/URL)
</p>

Un chemin URL vers le répertoire de sortie de la compilation. Notez que si vous avez besoin d'une chaîne de chemin absolu valide, vous devez utiliser l'utilitaire intégré [`fileURLToPath`](https://nodejs.org/api/url.html#urlfileurltopathurl-options) de Node.

```js
import { fileURLToPath } from 'node:url';

export default {
  name: 'mon-integration',
  hooks: {
    'astro:build:generated': ({ dir }) => {
      const outFile = fileURLToPath(new URL('./mon-integration.json', dir));
    }
  }
}
```

### `astro:build:done`

**Hook précédent :**[`astro:build:generated`](#astrobuildgenerated)

**Quand :** Après l'achèvement d'une compilation pour la production (SSG ou SSR).

**Pourquoi :** Pour accéder aux routes et aux ressources générées pour l'extension (p. ex. copier le contenu dans le répertoire `/assets` généré). Si vous envisagez de transformer les ressources générées, nous vous recommandons d'explorer l'[API des modules d'extension de Vite](https://vite.dev/guide/api-plugin.html) et de [configurer via `astro:config:setup`](#option-updateconfig) à la place.

```js
'astro:build:done'?: (options: {
  pages: { pathname: string }[];
  dir: URL;
  /** @deprecated Utilisez la Map `assets` et le nouveau hook `astro:routes:resolved`*/
  routes: IntegrationRouteData[];
  assets: Map<string, URL[]>;
  logger: AstroIntegrationLogger;
}) => void | Promise<void>;
```

#### Option `dir`

<p>

**Type :** [`URL`](https://developer.mozilla.org/fr/docs/Web/API/URL)
</p>

Un chemin URL vers le répertoire de sortie de la compilation. Notez que si vous avez besoin d'un chemin absolu valide, vous devriez utiliser l'utilitaire intégré [`fileURLToPath`](https://nodejs.org/api/url.html#urlfileurltopathurl-options) de Node.

```js
import { writeFile } from 'node:fs/promises';
import { fileURLToPath } from 'node:url';

export default function myIntegration() {
  return {
    hooks: {
      'astro:build:done': async ({ dir }) => {
        const metadata = await getIntegrationMetadata();
        // Utilisez fileURLToPath pour obtenir une chaîne de chemin absolu valide et multiplateforme.
        const outFile = fileURLToPath(new URL('./mon-integration.json', dir));
        await writeFile(outFile, JSON.stringify(metadata));
      }
    }
  }
}
```

#### Option `routes`

:::caution
Cette propriété est dépréciée depuis la version 5.0. Consultez le [guide de migration](/fr/guides/upgrade-to/v5/#déprécié--routes-sur-le-hook-astrobuilddoneapi-des-intégrations).
:::

<p>

**Type :** [`IntegrationRouteData[]`](#référence-du-type-integrationroutedata)
</p>

Une liste de toutes les routes générées avec leurs métadonnées associées.

Vous pouvez référencer le type `IntegrationRouteData` complet ci-dessous, mais les propriétés les plus courantes sont les suivantes :

- `component` - le chemin du fichier d'entrée par rapport à la racine du projet
- `pathname` - l'URL du fichier de sortie (non définie pour les routes utilisant les paramètres `[dynamic]` et `[...spread]`)

#### Option `assets`

<p>

**Type :** `Map<string, URL[]>`<br />
<Since v="5.0.0" />
</p>

Contient les URL vers les chemins des fichiers de sortie, regroupés par la propriété `pattern` de [`IntegrationResolvedRoute`](#référence-du-type-integrationresolvedroute).

#### Option `pages`

<p>

**Type :** `{ pathname: string }[]`
</p>

Une liste de toutes les pages générées. Il s'agit d'un objet avec une propriété.

- `pathname` - le chemin finalisé de la page.

### Hooks personnalisés

Des hooks personnalisés peuvent être ajoutés aux intégrations en étendant l'interface `IntegrationHooks` via [augmentation globale](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation).

```ts
declare global {
  namespace Astro {
    export interface IntegrationHook {
      'votre:hook': (params: YourHookParameters) => Promise<void>
    }
  }
}
```

Astro réserve le préfixe `astro:` pour les futurs hooks intégrés. Veuillez choisir un préfixe différent lorsque vous nommez votre hook personnalisé.

## Référence des types des intégrations

### `AstroIntegrationLogger`

Une instance du logger d'Astro, utile pour écrire des journaux. Ce logger utilise le même [niveau de journalisation](/fr/reference/cli-reference/#--verbose)
configuré via la CLI.

**Méthodes disponibles** pour écrire dans le terminal :
- `logger.info("Message")`;
- `logger.warn("Message")`;
- `logger.error("Message")`;
- `logger.debug("Message")`;

Tous les messages sont précédés d’une étiquette qui a la même valeur que le nom de l’intégration.

```ts title="integration.ts" {8}
import type { AstroIntegration } from "astro";
export function formatIntegration(): AstroIntegration {
  return {
    name: "astro-format",
    hooks: {
      "astro:build:done": ({ logger }) => {
        // faire quelque chose
        logger.info("Intégration prête.");
      }
    }
  }
}
```

L'exemple ci-dessus écrira un message qui inclut le message d'`info` fourni :

```shell
[astro-format] Intégration prête.
```

Pour écrire certains messages avec une étiquette différente, utilisez la méthode `.fork` pour spécifier une alternative au nom (`name`) par défaut :

```ts title="integration.ts" ".fork"
import type { AstroIntegration } from "astro";
export function formatIntegration(): AstroIntegration {
  return {
    name: "astro-format",
    hooks: {
      "astro:config:done": ({ logger }) => {
        // faire quelque chose
        logger.info("Intégration prête.");
      },
      "astro:build:done": ({ logger }) => {
        const buildLogger = logger.fork("astro-format/build");
        // faire quelque chose
        buildLogger.info("Compilation terminée.")
      }
    }
  }
}
```

L'exemple ci-dessus produira des journaux avec `[astro-format]` par défaut, et `[astro-format/build]` lorsqu'il est spécifié :

```shell
[astro-format] Intégration prête.
[astro-format/build] Compilation terminée.
```

### `HookParameters`

Vous pouvez obtenir le type des arguments d'un hook en transmettant le nom du hook à l'utilitaire de typage `HookParameters`. Dans l'exemple suivant, l'argument `options` d'une fonction est typé pour correspondre aux paramètres du hook `astro:config:setup` :

```ts /HookParameters(?:<.+>)?/
import type { HookParameters } from 'astro';

function mySetup(options: HookParameters<'astro:config:setup'>) {
  options.updateConfig({ /* ... */ });
}
```

### Référence du type `IntegrationResolvedRoute`

```ts
interface IntegrationResolvedRoute {
	pattern: RouteData['route'];
	patternRegex: RouteData['pattern'];
	entrypoint: RouteData['component'];
	isPrerendered: RouteData['prerender'];
	redirectRoute?: IntegrationResolvedRoute;
	generate: (data?: any) => string;
	params: string[];
	pathname?: string;
	segments: RoutePart[][];
	type: RouteType;
	redirect?: RedirectConfig;
	origin: 'internal' | 'external' | 'project';
}
```

#### `pattern`

<p>

**Type :** `string`
</p>

Permet d'identifier le type de route en fonction de son chemin. Voici quelques exemples de chemins associés à leur motif :
* `src/pages/index.astro` sera `/`
* `src/pages/blog/[...slug].astro` sera `/blog/[...slug]`
* `src/pages/site/[blog]/[...slug].astro` sera `/site/[blog]/[...slug]`

#### `patternRegex`

<p>

**Type :** `RegExp`
</p>

Vous permet d'accéder à une expression régulière utilisée pour faire correspondre une URL d'entrée à une route demandée.

Par exemple, étant donné un chemin `[fruit]/about.astro`, l'expression régulière sera `/^\/([^/]+?)\/about\/?$/`. L'utilisation de `pattern.test("banana/about")` renverra `true`.

#### `entrypoint`

<p>

**Type :** `string`
</p>

L'URL d'accès du composant source.

#### `isPrerendered`

<p>

**Type :** `boolean`
</p>

Détermine si la route utilise le [rendu à la demande](/fr/guides/on-demand-rendering/). La valeur sera `true` pour les projets configurés avec :
* `output: 'static'` quand la route n'exporte pas `const prerender = true` 
* `output: 'server'` quand la route exporte `const prerender = false`

#### `redirectRoute`

<p>

**Type :** `IntegrationResolvedRoute | undefined`
</p>

Lorsque la valeur de `IntegrationResolvedRoute.type` est `redirect`, la valeur sera la `IntegrationResolvedRoute` vers laquelle rediriger. Sinon, la valeur sera indéfinie.

#### `generate()`

<p>

**Type :** `(data?: any) => string`
</p>

Fonction qui fournit les paramètres facultatifs de la route, les interpole avec le modèle de route et renvoie le nom de chemin de la route.

Par exemple, avec une route telle que `/blog/[...id].astro`, la fonction `generate` pourrait renvoyer :

```js
console.log(generate({ id: 'presentation' })) // affichera `/blog/presentation`
```

#### `params`

<p>

**Type :** `string[]`
</p>

Permet d'accéder aux paramètres (`params`) de la route. Par exemple, lorsqu'un projet utilise les [routes dynamiques](/fr/guides/routing/#routes-dynamiques) suivantes `/pages/[lang]/[...slug].astro`, la valeur sera `['lang', '...slug']`.

#### `pathname`

<p>

**Type :** `string | undefined`
</p>

Pour les routes régulières, la valeur sera le chemin d’accès de l’URL où cette route sera desservie. Lorsqu'un projet utilise les [routes dynamiques](/fr/guides/routing/#routes-dynamiques) (c'est-à-dire `[dynamic]` ou `[...spread]`), le chemin sera indéfini.

#### `segments`

<p>

**Type :** <code><a href="https://github.com/withastro/astro/blob/3b10b97a4fecd1dfd959b160a07b5b8427fe40a7/packages/astro/src/types/public/internal.ts#L154-L158">RoutePart</a>[][]</code>
</p>

Permet d'accéder aux [paramètres (`params`)](#params) de la route avec des métadonnées supplémentaires. Chaque objet contient les propriétés suivantes :
* `content` : le nom du paramètre,
* `dynamic` : si la route est dynamique ou non,
* `spread` : si la route dynamique utilise la syntaxe de décomposition ou non.

Par exemple, la route suivante `/pages/[blog]/[...slug].astro` générera les segments :

```js
[
  [ { content: 'pages', dynamic: false, spread: false } ],
  [ { content: 'blog', dynamic: true, spread: false } ],
  [ { content: '...slug', dynamic: true, spread: true } ]
]
```

#### `type`

<p>

**Type :** `RouteType`
</p>

Permet d'identifier le type de route. Les valeurs possibles sont :
* `page` : une route qui réside dans le système de fichiers, généralement un composant Astro
* `endpoint` : une route qui réside dans le système de fichiers, généralement un fichier JS qui expose les méthodes des points de terminaison
* `redirect` : une route qui pointe vers une autre route qui se trouve dans le système de fichiers
* `fallback` : une route qui n'existe pas dans le système de fichiers et qui doit être gérée par d'autres moyens, généralement le middleware

#### `redirect`

<p>

**Type :** <code><a href="https://github.com/withastro/astro/blob/3b10b97a4fecd1dfd959b160a07b5b8427fe40a7/packages/astro/src/types/public/config.ts#L39-L44">RedirectConfig</a> | undefined</code>
</p>

Permet d'accéder à la route vers laquelle rediriger. Il peut s'agir d'une chaîne de caractères ou d'un objet contenant des informations sur le code d'état et sa destination.

#### `origin`

<p>

**Type :** `'internal' | 'external' | 'project'`
</p>

Détermine si une route provient du noyau Astro (`internal`), d'une intégration (`external`) ou du projet de l'utilisateur (`project`).

### Référence du type `IntegrationRouteData`

:::caution
Ce type est déprécié depuis la v5.0. Utilisez plutôt [`IntegrationResolvedRoute`](#référence-du-type-integrationresolvedroute).
:::

Une version plus petite de `RouteData` qui est utilisée dans les intégrations.

```ts
interface IntegrationRouteData {
  type: RouteType;
  component: string;
  pathname?: string;
  pattern: RegExp;
  params: string[];
  segments: { content: string; dynamic: boolean; spread: boolean; }[][];
  generate: (data?: any) => string;
	prerender: boolean;
	distURL?: URL[];
	redirect?: RedirectConfig;
	redirectRoute?: IntegrationRouteData;
}
```

#### `type`

<p>

**Type :** `RouteType`
</p>

Permet d'identifier le type de route. Les valeurs possibles sont :
* `page` : une route qui réside dans le système de fichiers, généralement un composant Astro
* `endpoint` : une route qui réside dans le système de fichiers, généralement un fichier JS qui expose les méthodes des points de terminaison
* `redirect` : une route qui pointe vers une autre route qui se trouve dans le système de fichiers
* `fallback` : une route qui n'existe pas dans le système de fichiers et qui doit être gérée par d'autres moyens, généralement le middleware

#### `component`

<p>

**Type :** `string`
</p>

Vous permet d'accéder à l'URL du chemin d'accès du composant source.

#### `pathname`

<p>

**Type :** `string | undefined`
</p>

Pour les routes régulières, la valeur sera le chemin d’accès de l’URL où cette route sera desservie. Lorsqu'un projet utilise les [routes dynamiques](/fr/guides/routing/#routes-dynamiques) (c'est-à-dire `[dynamic]` ou `[...spread]`), le chemin sera indéfini.

#### `pattern`

<p>

**Type :** `RegExp`
</p>

Vous permet d'accéder à une expression régulière utilisée pour faire correspondre une URL d'entrée à une route demandée.

Par exemple, étant donné un chemin `[fruit]/about.astro`, l'expression régulière sera `/^\/([^/]+?)\/about\/?$/`. L'utilisation de `pattern.test("banana/about")` renverra `true`.

#### `params`

<p>

**Type :** `string[]`
</p>

Permet d'accéder aux paramètres (`params`) de la route. Par exemple, lorsqu'un projet utilise les [routes dynamiques](/fr/guides/routing/#routes-dynamiques) suivantes `/pages/[lang]/[...slug].astro`, la valeur sera `['lang', '...slug']`.

#### `segments`

<p>

**Type :** `{ content: string; dynamic: boolean; spread: boolean; }[][]`
</p>

Vous permet d'accéder aux [paramètres (`params`)](#params-1) de la route avec des métadonnées supplémentaires. Chaque objet contient les propriétés suivantes :
* `content` : le paramètre,
* `dynamic` : si la route est dynamique ou non,
* `spread` : si la route dynamique utilise la syntaxe de décomposition ou non.

Par exemple, la route suivante `/pages/[lang]/index.astro` affichera les segments `[[ { content: 'lang', dynamic: true, spread: false } ]]`.

#### `generate()`

<p>

**Type :** `(data?: any) => string`
</p>

Fonction qui fournit les paramètres facultatifs de la route, les interpole avec le modèle de route et renvoie le nom de chemin de la route.

Par exemple, avec une route telle que `/blog/[...id].astro`, la fonction `generate` pourrait renvoyer :

```js
console.log(generate({ id: 'presentation' })) // affichera `/blog/presentation` 
```

#### `prerender`

<p>

**Type :** `boolean`
</p>

Détermine si la route est pré-rendue ou non.

#### `distURL`

<p>

**Type :** `URL[] | undefined`
</p>

Les chemins des fichiers physiques émis par cette route. Lorsqu'une route **n'est pas** pré-rendue, la valeur est soit `undefined` soit un tableau vide.

#### `redirect`

<p>

**Type :** <code><a href="https://github.com/withastro/astro/blob/3b10b97a4fecd1dfd959b160a07b5b8427fe40a7/packages/astro/src/types/public/config.ts#L39-L44">RedirectConfig</a> | undefined</code>
</p>

Permet d'accéder à la route vers laquelle rediriger. Il peut s'agir d'une chaîne de caractères ou d'un objet contenant des informations sur le code d'état et sa destination.

#### `redirectRoute`

<p>

**Type :** `IntegrationRouteData | undefined`
</p>

Lorsque la valeur de `RouteData.type` est `redirect`, la valeur contiendra les données `IntegrationRouteData` de la route vers laquelle rediriger. Sinon, la valeur sera indéfinie.

## Autoriser l'installation avec `astro add`

[La commande `astro add`](/fr/reference/cli-reference/#astro-add) permet aux utilisateurs d'ajouter facilement des intégrations et des adaptateurs à leur projet. Si vous voulez que _votre_ intégration soit installable avec cet outil, **ajoutez `astro-integration` au champ `keywords` dans votre `package.json`** :

```json
{
  "name": "example",
  "keywords": ["astro-integration"],
}
```

Une fois que vous avez [publié votre intégration sur npm](https://docs.npmjs.com/cli/v8/commands/npm-publish), lancer `astro add example` installera votre paquet avec toutes les dépendances spécifiées dans votre `package.json`. Cela appliquera également votre intégration au `astro.config` de l'utilisateur comme suit :

```diff
// astro.config.mjs
import { defineConfig } from 'astro/config';
+ import example from 'example';

export default defineConfig({
+  integrations: [example()],
})
```

:::caution
Cela suppose que votre définition d'intégration est 1) une exportation `default` et 2) une fonction. Assurez-vous que c'est le cas avant d'ajouter le mot-clé `astro-integration` !
:::

## Ordre des intégrations

Toutes les intégrations sont exécutées dans l'ordre dans lequel elles sont configurées. Par exemple, pour le tableau `[react(), svelte()]` dans le fichier `astro.config.*` d'un utilisateur, `react` s'exécutera avant `svelte`.

Votre intégration devrait idéalement s'exécuter dans n'importe quel ordre. Si ce n'est pas possible, nous recommandons de documenter que votre intégration doit venir en premier ou en dernier dans le tableau de configuration `integrations` de votre utilisateur.

## Combiner les intégrations dans des préréglages

Une intégration peut également être écrite sous la forme d'une collection de plusieurs intégrations plus petites. Nous appelons ces collections des **préréglages**. Au lieu de créer une fonction d'usine qui renvoie un seul objet d'intégration, un préréglage renvoie un _tableau_ d'objets d'intégration. Cela est utile pour créer des fonctionnalités complexes à partir de plusieurs intégrations.

```js
integrations: [
  // Exemple : lorsque examplePreset() retourne : [integrationOne, integrationTwo, ...etc]
  examplePreset()
]
```

## Ressources communautaires

- [Créez vos propres intégrations Astro](https://www.freecodecamp.org/news/how-to-use-the-astro-ui-framework/#chapter-8-build-your-own-astro-integrations-1) (en) - par Emmanuel Ohans sur FreeCodeCamp
- [Modèle d'Intégration Astro](https://github.com/florian-lefebvre/astro-integration-template) - par Florian Lefebvre sur GitHub
